<template>
    <!-- 收获地址 -->
    <van-contact-card type="edit" :name="`${address.name} ${address.region_text}`" :tel="address.tel" v-if="AddressCount > 0 && Object.getOwnPropertyNames(address).length > 0" @click="OnAddressSelect" />
    <van-contact-card type="add" v-else-if="AddressCount > 0 && Object.getOwnPropertyNames(address).length === 0" @click="OnAddressSelect" />
    <van-contact-card type="add" v-else @click="AddressShow = true"  />

    <!-- 商品卡片 -->
    <van-card
        v-for="(item, key) in CartList"
        :thumb="item.product.thumb_text"
        :num="item.nums"
        @click-thumb="ToProductInfo(item.proid)"
    >
        <template #title>
            <div
                class="title"
                @click="ToProductInfo(item.proid)"
            >{{item.product.name}}</div>
        </template>

        <!-- 卡片的插槽部分 -->
        <template #desc v-if="item.attrs">
            <van-tag
                v-for="(attr,index) in item.attrs"
                :key="index"
                class="tag"
                type="primary"
            >{{attr.value}}</van-tag>
            <van-tag
                class="tag"
                type="warning"
                v-if="item.type === 'live'"
            >直播商品</van-tag>
        </template>

        <template #desc v-else>
            <van-tag 
                class="tag" 
                type="danger"
            >无规格数据</van-tag>
            <van-tag 
                class="tag"
                type="warning"
                v-if="item.type === 'live'"
            >直播商品</van-tag>
        </template>

        <template #price>
            <div class="price">单价：￥{{item.price}}</div>
            <div class="price">合计：￥{{item.total}}</div>
        </template>
    </van-card>

    <van-cell 
        title="支付方式" 
        :value="PayActive.text" 
        is-link 
        @click="PayShow = true"
    />

    <!-- 支付方式的选择器 -->
    <van-popup 
        v-model:show="PayShow"
        position="bottom"
        round
    >
        <van-picker
            title="选择支付方式"
            :columns="PayList"
            @cancel="PayShow = false"
            @confirm="OnPayConfirm"
        />
    </van-popup>

    <!-- 优惠券单元格 -->
    <van-coupon-cell
        :coupons="CouponList"
        :chosen-coupon="CouponActive"
        @click="CouponShow = true"
    />

    <!-- 优惠券列表 -->
    <van-popup
        v-model:show="CouponShow"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px;"
    >
        <van-coupon-list
            :coupons="CouponList"
            :disabled-coupons="NotCouponList"
            :chosen-coupon="CouponActive"
            :exchange-button-disabled="true"
            :show-exchange-bar="false"
            @change="OnCouponChange"
        />
    </van-popup>

    <!--订单备注 -->
    <van-field 
        v-model="remark"
        rows="2"
        autosize
        label="订单备注"
        type="textarea"
        maxlength="120"
        placeholder="请输入订单备注"
        show-word-limit
    />

    <!-- 添加收货地址 -->
    <van-popup 
        v-model:show="AddressShow"
        position="bottom"
        round
    >
        <van-address-edit 
            show-set-default
            :area-list="areaList"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            :address-info="AddressInfo"
            @save="OnAddressAdd"
        />
    </van-popup>


    <!-- 提交动作栏 -->
    <van-submit-bar text-align="left" :price="total" button-text="确认支付" @submit="OnSubmit" />

</template>

<script setup>
// 引入地区数据
import { areaList } from '@vant/area-data';
// 全局this的代理
const { proxy } = getCurrentInstance();
// 用户数据
const business = proxy.$business;
// 收货地址
const address = ref({});
// 购物车列表数据
const CartList = ref([]);
// 地址列表展示与否
const AddressShow = ref(false);
// 收货地址详情数据
const AddressInfo = ref({});
// 收货地址总数
const AddressCount = ref(0);
// 购物车记录id
const cartids = ref(proxy.$route.query.cartids ?? 0);

// 支付方式
const PayShow = ref(false);
// 支付方式列表
const PayList = reactive([
    {
        text:'余额支付',
        value:'money'
    },
    {
        text:'支付宝支付',
        value:'zfb'
    },
    {
        text:'微信支付',
        value:'wx'
    }
])
const PayActive = ref(PayList[0]);

// 可用优惠卷
const CouponList = ref([]);
// 过期优惠卷
const NotCouponList = ref([]);
// 默认优惠卷|不使用优惠卷
const CouponActive = ref(-1);
// 优惠卷列表展示与否
const CouponShow = ref(false);

// 订单备注
const remark = ref('');

// 挂载前钩子
onBeforeMount(() =>
{
    // 获取收货地址初始数据
    GetAddressData();
    // 获取购物车初始数据
    GetCartData();
    // 获取优惠卷初始数据
    GetCouponData();

    // 收货地址初始数据
    AddressInfo.value = {
        name: business.value.nickname,
        tel: business.value.mobile,
        areaCode: business.value.district || business.value.city || business.value.province,
    }
})

// 支付订单提交
const OnSubmit = async () =>
{
    // 判断是否发起哪个请求
    if(cartids.value)
    {
        // 组装数据
        const params = {
            cartids:cartids.value,
            busid:business.value.id,
            addrid:address.value.id,
            pay:PayActive.value.value,
            remark:remark.value
        }

        // 如果使用了优惠卷
        if(CouponActive.value !== -1)
        {
            params.couponid = CouponList.value[CouponActive.value].id;
        }

        // 发起请求
        const result = await proxy.$http.post({
            url:'/order/add',
            params
        })

        if(result.code === 1)
        {
            // 如果url存在，直接跳转订单详情
            if(result.url)
            {
                proxy.$success({
                    message:result.msg,
                    onClose:() =>
                    {
                        proxy.$router.push({path:result.url,query:result.data,replace:true});
                    }
                })
            }else
            {
                // 跳转收银台
                proxy.$router.push({path:'/business/cashier',query:{payid:result.data.id}});
            }
        }else
        {
            proxy.$fail(result.msg);
        }
    }else{
        // 发起立即购买的请求
        // 从CartList提取需要的数据
        let info = CartList.value[0];
        // console.log(info);
        // 组装数据
        const params = {
            busid: business.value.id,
            addrid: address.value.id,
            pay: PayActive.value.value,
            remark: remark.value,
            proid: info.proid, // 商品主键
            price: info.price, // 商品价格
            nums: info.nums, // 商品数量
            attrs: info.attrs.length > 0 ? JSON.stringify(info.attrs) : "", // 已选择商品属性
        };

        // 判断是否使用了优惠卷
        if(CouponActive.value !== -1)
        {
            params.couponid = CouponList.value[CouponActive.value].id;
        }

        // 发起请求
        const result = await proxy.$http.post({
            url:'/order/buy',
            params,
        });

        // 处理结果
        if(result.code === 1)
        {
            if(result.url)
            {
                // 如果url存在，直接跳转订单详情
                proxy.$success({
                    message: result.msg,
                    onClose: () =>
                    {
                        proxy.$router.push({
                            path:result.url,
                            query:result.data,
                            replace:true
                        });
                    }
                });
            }else{
                // 跳转收银台  微信或者支付宝支付方式
                proxy.$router.push({
                    path:'/business/cashier',
                    query:{
                        payid:result.data.id
                    }
                });
            }
        }else{
            proxy.$fail(result.msg);
        }
    }
};

// 确认支付方式
const OnPayConfirm = ({selectedOptions}) =>
{
    PayActive.value = selectedOptions[0];

    PayShow.value = false;
}

// 选择优惠券
const OnCouponChange = (index) =>
{
    CouponActive.value = index;

    CouponShow.value = false;

    if(CouponActive.value !== -1)
    {
        // 选中的优惠券
        const coupon = CouponList.value[index];

        // 优惠后总价
        let total = 0;

        // 计算商品的总价
        CartList.value.map(item => total += parseFloat(item.total));

        // 保留两位小数点
        total = total.toFixed(2);

        // 折扣率
        let rate = coupon.rate ? coupon.rate : 1;

        // 优惠后的总价
        let RatePrice = (parseFloat(total) * parseFloat(rate)).toFixed(2);

        // 优惠券优惠金额
        let CouponPrice = (parseFloat(total) - parseFloat(RatePrice)).toFixed(2);
        
        CouponList.value[index].value = parseFloat(CouponPrice) * 100;
    }
    
}

// 获取默认收货地址
const GetAddressData = async () =>
{
    const cached = Object.getOwnPropertyNames(proxy.$address.value).length > 0 ? proxy.$address : null;

    console.log(cached);

    if(cached)
    {
        address.value = cached.value;

        return;
    }

    const params = {
        busid:business.value.id
    }

    const result = await proxy.$http.post({
        url:'/cart/address',
        params
    })

    if(result.code === 1)
    {
        address.value = {
            id:result.data.address.id,
            name:result.data.address.consignee,
            tel:result.data.address.mobile,
            region_text:result.data.address.region_text + result.data.address.address
        }
    }
}

const GetCartData = async () =>
{
    // 先判断本地存储当中是否存在缓存,如果有缓存就拿缓存的数据，没有缓存就接口请求
    let cart = Object.getOwnPropertyNames(proxy.$cart.value).length > 0 ? proxy.$cart.value : [];

    if(cart.length > 0 && !cartids.value)
    {
        CartList.value = cart;

        return false;
    }

    let params = {
        cartids:cartids.value,
        busid:business.value.id
    }

    let result = await proxy.$http.post({
        url:'/cart/confirm',
        params
    })

    if(result.code === 1)
    {
        CartList.value = result.data;

        // 把商品规格转换对象
        CartList.value.map(item => item.attrs = JSON.parse(item.attrs));
    }else
    {
        proxy.$fail({
            message:result.msg,
            onClose:() => proxy.$router.back()
        })
    }
}

const GetCouponData = async () =>
    {
        let params = {
            busid:business.value.id
        }

        let result = await proxy.$http.post({
            url:'/cart/coupon',
            params
        })

        if(result.code === 1)
        {
            AddressCount.value = result.data.AddressCount;

            for(let item of result.data.CouponList)
            {
                CouponList.value.push({
                    id:item.id,// 领取优惠券记录id
                    name:item.coupon.title,// 优惠券名称
                    startAt:item.coupon.createtime,// 优惠券开始时间
                    endAt:item.coupon.endtime,// 优惠券结束时间
                    rate: item.coupon.rate,// 折扣率
                    valueDesc: `${item.coupon.rate*100}`,// 折扣券优惠金额文案
                    unitDesc: '折',// 单位文案
                    condition:item.coupon.status_text,// 满减条件
                })
            }

            for(let item of result.data.NotCouponList)
            {
                NotCouponList.value.push({
                    id:item.id,// 领取优惠券记录id
                    name:item.coupon.title,// 优惠券名称
                    startAt:item.coupon.createtime,// 优惠券开始时间
                    endAt:item.coupon.endtime,// 优惠券结束时间
                    rate: item.coupon.rate,// 折扣率
                    valueDesc: `${item.coupon.rate*100}`,// 折扣券优惠金额文案
                    unitDesc: '折',// 单位文案
                    condition:item.coupon.status_text,// 满减条件
                })
            }
        }
    }

const OnAddressAdd = () =>
{

}

const total = computed(() =>
{
    let total = 0;

    CartList.value.map(item => total += parseFloat(item.total));

    if(CouponActive.value !== -1)
    {
        let rate = CouponList.value[CouponActive.value].rate ?? 1;

        total = (total * rate).toFixed(2);
    }

    return total * 100;
})

const ToProductInfo = (proid) => proxy.$router.push({path:'/product/info',query:{ proid }});
const OnAddressSelect = () => proxy.$router.push({path:'/address',query:{action:'confirm'}});
</script>

<style scoped>
.van-card{
    background-color:#fff;
}

:deep(.van-card__bottom){
    position: relative;
}

:deep(.van-card__num){
    position: absolute;
    bottom: 0px;
    right: 5px;
}

.title{
    font-size:14px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 5px;
}

.tag{
    margin-right:5px;
}

.price{
    font-size:12px;
    font-weight: bold;
}

/* 姓名只一行显示，超出隐藏 */
:deep(.van-contact-card__title) div:first-child{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
</style>